import { Table, Tag } from 'antd';
import React from 'react';

import { DAL } from '@donnu-prod-practice/dal';
import { format } from '@donnu-prod-practice/utils';

/* -------------------------------------------------------------------------- */
/*                                  COMPONENT                                 */
/* -------------------------------------------------------------------------- */

export const AllPanelPresentation = React.memo<Props>(({ countryList }) => (
  <Table dataSource={countryList} pagination={false} style={{ width: '100%' }} scroll={{ x: 300 }}>
    <Table.Column title="ID" dataIndex="id" key="id" render={(_, { id }: DAL.country.get.Country) => <Tag>{id}</Tag>} />

    <Table.Column title="Страна" dataIndex="name" key="name" render={(_, { name }: DAL.country.get.Country) => name} />

    <Table.Column title="Рейтинг" dataIndex="rate" key="rate" render={(_, { rate }: DAL.country.get.Country) => rate} />

    <Table.Column
      title="Заявки резидентов"
      dataIndex="residentRequests"
      key="residentRequests"
      render={(_, { residentRequests }: DAL.country.get.Country) => format.number(residentRequests)}
    />

    <Table.Column
      title="Заявки нерезидентов"
      dataIndex="nonResidentRequests"
      key="nonResidentRequests"
      render={(_, { nonResidentRequests }: DAL.country.get.Country) => format.number(nonResidentRequests)}
    />

    <Table.Column
      title={'Заявки (\u00A0всего\u00A0)'}
      dataIndex="allRequests"
      key="allRequests"
      render={(_, { allRequests }: DAL.country.get.Country) => format.number(allRequests)}
    />
  </Table>
));

/* -------------------------------------------------------------------------- */
/*                                 / COMPONENT                                */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                    TYPES                                   */
/* -------------------------------------------------------------------------- */

interface Props {
  readonly countryList: DAL.country.get.CountryList;
}

/* -------------------------------------------------------------------------- */
/*                                   / TYPES                                  */
/* -------------------------------------------------------------------------- */
